<template>
  <div>
    <Paper title="新建出场订单">
      <Form style="margin-top: 20px">
          <i-col v-for="item in inputList" :key="item.id" span="8">
            <row>
            <FormItem :label-width="88" :label="item.name">
              <Input class="input" v-model="item.value"></Input>
            </FormItem>
            </row>
          </i-col>
      </Form>
    </Paper>
    <Paper
      :handle="() => {}"
      style="border-radius: 0px 0px 10px 10px"
      title="生猪列表"
    >
      <Divider style="margin: 14px 0px"></Divider>
      <Button class="button" type="primary">
        <Icon type="md-arrow-up" />
        导出数据
      </Button>
      <Button class="button">
        <Icon type="md-document" />
        导出报告
      </Button>
      <Table
        class="table"
        style="margin-top: 14px"
        ref="selection"
        :columns="columns"
        :data="data.slice((page - 1) * pageSize, page * pageSize)"
      >
      </Table>
      <div
        style="
          margin-top: 14px;
          align-items: center;
          justify-content: space-between;
        "
        class="flex-row"
      >
        <p class="total">{{ `共${data.length}条记录` }}</p>
        <Page size="small" :total="100" show-sizer @on-change="pageClickHandle()" @on-page-size-change="pageSizeChange()" />
        <BottomBar>
      <Button class="confirm" type="primary" @click="primary()">提交</Button>
      <Button>取消</Button>
    </BottomBar>
      </div>
    </Paper>
  </div>
</template>

<script>
import Label from "../components/Label.vue";
import Paper from "../components/Paper.vue";
import BottomBar from "../components/BottomBar.vue";
import { postRequset } from "../libs/fetch";
export default {
  name: "SAddFarms",
  components: {
    Label,
    Paper,
    BottomBar,
  },
  mounted() {
    this.getList();
  },
  data() {
    return {
      inputList: [
        {
          name: "批发商",
          id: 1,
          value:''
        },
      ],
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "猪ID",
          key: "id",
        },
        {
          title: "代宰户",
          key: "proid",
        },
        {
          title: "体重/Kg",
          key: "weight",
        },
      ],
      data:[],
      width: document.documentElement.clientWidth,
      tempRow: {},
      page:1,
      pageSize:10,
    };
  },
  methods:{
    pageClickHandle() {
      this.page = this.$refs.page.currentPage
    },
    pageSizeChange(){
      this.pageSize = this.$refs.page.currentPageSize
      console.log(this.pageSize);
    },
    getList() {
      postRequset("/sy-slaughter/pig/list")
        .then((res) => {
          let tempList = res.data;
          console.log(tempList);
          tempList.forEach((element) => {
            this.data.push({
              id: element.pid,
              weight:element.pweight,
            });
          });
      })
        .catch();
    },
    primary(){
      let sid='';
      let tempList=this.$refs.selection.getSelection();
      let pList=[];
      console.log(tempList);
      tempList.forEach((element) => {
            pList.push(
              element.id,
            );
          });
      this.inputList.forEach((e)=>{
        if(e.id==1){
            sid=e.value;
          };
      })
      postRequset("/sy-slaughter/order/exit",{
        sId:sid,
        pigList:pList
      })
        .then((res) => {
          this.getList();
          //刷新页面
          location.reload();
        })
        .catch();
    },
  }
};
</script>

<style scoped lang="less">
.input {
  max-width: 230px;
}
.confirm {
  width: 70px;
  margin-right: 12px;
}
</style>